<template>
    <div class='whatdo-bg'>
        <div class="whatdo-inner w">
            <my-title :title="title" />
            <div class="whatdo-describe">
                {{describe}}
            </div>
            <div class="whatdo-list">
                <dl v-for="msg in messages" :key="msg.id">
                    <dt>
                        <img :src="msg.img_url" alt="">
                    </dt>
                    <dd>{{msg.title}}</dd>
                    <dd>{{msg.context}}</dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: ["我们能为您做什么", "WHAT CAN WE DO"],
            describe:
                "曾就职国内某家知名企业，驰骋职场数年，熟练掌握网页设计、电商视觉设计、前端HTML5、PHP编程等技术，并对页面色彩搭配、网页特效有一定的研究见解。创建RMB工作室，7年网页设计经验，5年网站开发制作经验，国内专业WEB设计师、优秀视觉设计师。",
            // 测试数组
            messages: [
                {
                    id: 1,
                    img_url: require("@/assets/img/display01.png"),
                    title: "网站设计及开发",
                    context:
                        "拥有7年网页设计与建站经验，顾问式项目管理服务，根据企业实际情况定制专属（品牌）官网。"
                },
                {
                    id: 2,
                    img_url: require("@/assets/img/display02.png"),
                    title: "软件界面设计",
                    context:
                        "专业的软件界面设计服务，让用户一眼就爱上您的软件界面，在众多软件产品中脱颖而出。"
                },
                {
                    id: 3,
                    img_url: require("@/assets/img/display03.png"),
                    title: "APP设计及开发",
                    context:
                        "以移动端手机及只能终端为载体，搭建网站，提供高端定制化的手机应用开发服务。"
                },
                {
                    id: 4,
                    img_url: require("@/assets/img/display04.png"),
                    title: "企划VI设计",
                    context:
                        "VI设计是企业文化的视觉符号，是企业价值观的体现，我们将用心为您企业打造品牌。"
                }
            ]
        };
    }
};
</script>

<style lang='css' scoped>
.whatdo-bg {
    height: 680px;
    background-color: #fff;
}
.whatdo-bg .whatdo-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
    padding-top: 20px; 
    height: 100%;
}
/* 
    */
.whatdo-inner .whatdo-describe {
    padding-bottom: 70px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 1.125rem;
    color: #8f9eb6;
}
.whatdo-inner .whatdo-list {
    display: flex;
    justify-content: space-between;
    height: 220px;
    width: 100%;
}
.whatdo-inner .whatdo-list dl {
    float: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    width: 260px;
    height: 100%;
}
.whatdo-list dl dd:nth-child(2) {
    padding: 20px 0px;
    width: 100%;
    font-size: 1.125rem;
}
.whatdo-list dl dd:nth-child(3) {
    width: 100%;
    line-height: 22px;
    font-size: 0.75rem;
    color: #7c8490;
}
</style>